<script type="text/javascript" src="../js/address.js"></script>
<script src="../manager/js/jquery-3.5.0.js"></script>
<script src="../manager/js/template-web.js"></script>
<script src="../manager/layer/layer.js"></script>
<script type="text/javascript">

	$(function(){
		//获取省的长度创建省option
		 /* 自动加载省份列表 */
		function showPro(){
			for(let i=0;i<provinceList.length;i++){
				let ele = "<option value="+i+">"+provinceList[i].name+"</option>";
				$("#provience").append(ele);
			}
		}
		//创建市
		function showCity(current_prov){
			for(let i=0;i<provinceList[current_prov].cityList.length;i++){
				let ele = "<option value="+i+" pro="+current_prov+" >"+provinceList[current_prov].cityList[i].name+"</option>";
				$("#city").append(ele);
			}
		}
		//创建区
		let len = provinceList.length;
		function showArea(current_prov,current_city){
			//港澳台没有区
			if(current_prov==len-1 || current_prov==len-2 || current_prov==len-3){
				return;
			}
			for(let i=0;i<provinceList[current_prov].cityList[current_city].areaList.length;i++){
				let ele = "<option value="+i+">"+provinceList[current_prov].cityList[current_city].areaList[i]+"</option>";
				$("#area").append(ele);
			}
		}
		
		showPro();
		showCity(0);
		showArea(0,0);
		
		//改变市，改变相应区
		$("#city").change(function(){
			//删除所有区的值
			$("#area").children().remove();
			//再创建
			let city = $(this).val();
			let pro = $(this).children().eq(0).attr("pro");
			showArea(pro,city);
		})
		
		//改变省，改变相应市区
		$("#provience").change(function(){
			//删除所有市区的值
			$("#city").children().remove();
			$("#area").children().remove();
			//再创建
			let pro = $(this).val();
			showCity(pro);
			showArea(pro,0);
		})
		
		//保存地址
		function saveAddress(){
			let rname = $("#accept").val();
			let prono = parseInt($("#provience").val());
			let cityno = parseInt($("#city").val());
			let areano = parseInt($("#area").val());
			let address = $("#address").val();
			let telphone = $("#telphone").val();
			let type = $("#type").prop("checked");
			
			let pro = provinceList[prono].name;
			let city;
			let area;
			if(prono==len-1 || prono==len-2 || prono==len-3){
				city="";
				area="";
			}else{
				city = provinceList[prono].cityList[cityno].name;
				area = provinceList[prono].cityList[cityno].areaList[areano];
			}
			
			
			//待完成数据有效性校验
			data={
				"rname":rname,
				"pro":pro,
				"city":city,
				"area":area,
				"telphone":telphone,
				"address":address,
				"type":type
			}
			
			//将内容恢复默认
			function initialContent(){
				$("#accept").val("");
				showPro();
				showCity(0);
				showArea(0,0);
				$("#address").val("");
				$("#telphone").val("");
				$("#type").prop("checked",false);
			}
			//发送请求保存数据
			$.post("address?opr=add",data,function(result){
				if(result.code==200){
					layer.alert("保存成功");
					//将内容恢复默认
					initialContent();
				}else{
					layer.alert("系统维护中");
				}
			},"json")
			
		}
		
		//注册保存事件
		$("#save").click(function(){
			saveAddress();
		})
		
		//发送ajax请求，展示地址数据
		let url = "address";
		let data = {
			"opr":"showAddress",
		}
		$.post(url,data,function(result){
			if(result.code==200){
				let addressHtml = template("tpl",{
					addresses:result.data
				});
				$("#addressdata").html(addressHtml);
			}else{
				layer.alert("系统维护中，加载地址失败，请稍后再试!");
			}
		},"json")
		
		
	})
	
	function sureDel(id,obj){
		$(function(){
			let data = {
					"opr":"del",
					"id":id
				}
				$(function(){
					$.post("address",data,function(result){
						if(result.code==200){
							//若数据库成功则移除掉
							$(obj).parent().parent().remove();
						}else{
							layer.alert("系统维护中,删除失败！");
						}
					},"json")
				})
		})
	}
	
	//删除地址
	function del(id,obj){
		layer.confirm("您确定删除吗？",{
			btn:["确定","算了"]
		},function(index){
			sureDel(id,obj);
			layer.close(index);
		},function(){
			
		})
		
	}
	
	//设默认地址
	function setDefault(id){
		$(function(){
			//发送ajax请求，展示地址数据
			let url = "address";
			let data = {
				"opr":"setDefault",
				"id":id
			}
			$.post(url,data,function(result){
				if(result.code==200){
					//发送ajax请求，展示地址数据
					let url = "address";
					let data = {
						"opr":"showAddress",
					}
					$.post(url,data,function(result){
						if(result.code==200){
							let addressHtml = template("tpl",{
								addresses:result.data
							});
							$("#addressdata").children().remove();
							$("#addressdata").html(addressHtml);
						}else{
							layer.alert("系统维护中，加载地址失败，请稍后再试!");
						}
					},"json")
				}else{
					layer.alert("系统维护中，设置默认地址失败！");
				}
			},"json")
		})
	}
	
	
</script>
<script id="tpl" type="text/html">
 {{each addresses address}}
<tr>
	<td>{{address.accepter}}</td>
	<td>{{address.provience}}{{address.city}}{{address.area}}</td>
	<td>{{address.detailArea}}</td>
	<td>{{address.telephone}}</td>
	<td><a class="blue" href='javascript:void(0)' onclick='update({{address.id}})'>修改</a>|
		{{if address.isDefault == '是'}}
			默认地址
		{{/if}}
        {{if address.isDefault == '否'}}
			<a class="blue" href="javascript:void(0)" onclick="del({{address.id}},this)">删除</a>|
			<a class="blue" href="javascript:void(0)" onclick="setDefault({{address.id}})">设为默认</a>
		{{/if}}
     </td>
	</tr>
{{/each}} 
</script>

<div class='tabs'>
	<div class="uc_title m_10 tabs_menu">
		<label class="current node"><span>地址管理</span></label>
	</div>
	<div class='tabs_content'>
		<div id="address_list" class="form_content m_10 node">
			<div class="uc_title2 m_10">
				<strong>已保存的有效地址</strong>
			</div>
			<table class="list_table" width="100%" cellpadding="0"
				cellspacing="0">
				<col width="120px" />
				<col width="120px" />
				<col width="240px" />
				<col width="120px" />
				<col width="150px" />
				<col />
				<thead>
					<tr>
						<th>收货人</th>
						<th>所在地区</th>
						<th>街道地址</th>
						<th>手机</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="addressdata">
				</tbody>
			</table>
		</div>
	</div>
</div>
<!--表单修改-->
<div class="orange_box" id='address_form'>
	<input type="hidden" id="id" value="">
	<table class="form_table" width="100%" cellpadding="0" cellspacing="0">
		<col width="120px" />
		<col />
		<caption>收货地址</caption>
		<tr>
			<th><span class="red">*</span> 收货人姓名：</th>
			<td><input id='accept' class="normal" type="text" /><label>收货人真实姓名，方便快递公司联系。</label></td>
		</tr>
		<tr>
			<th><span class="red">*</span> 所在地区：</th>
			<td><select name="province" id="provience"></select> <select
				name="city" id="city"></select> <select name="area" id="area"></select></td>
		</tr>
		<tr>
			<th><span class="red">*</span> 街道地址：</th>
			<td><input name='address' id='address' class="normal"
				type="text" /><label>真实详细收货地址，方便快递公司联系。</label></td>
		</tr>
		<tr>
			<th>手机号码：</th>
			<td><input name='telphone' id='telphone' class="normal"
				type="text" /><label>手机号码，如：13588888888</label></td>
		</tr>
		<tr>
			<th>设为默认：</th>
			<td><label><input name="type" id="type"
					type='checkbox' value='y'></label></td>
		</tr>
		<tr>
			<th></th>
			<td><label class="btn"><input type="button" id="save"
					value="保存" /></label> <label class="btn"><input type="button" id="cancel"
					value="取消" /></label></td>
		</tr>
	</table>
</div>